<template>
  <view class="container">
    <view class="login-box">
      <text class="title">用户注册</text>
      
      <form @submit="formSubmit">
        <view class="form-item">
          <input 
            class="input" 
            type="text" 
            placeholder="请输入用户名" 
            v-model="username"
            @input="clearError"
          />
        </view>
		
		<view class="form-item">
		  <input 
		    class="input" 
		    type="text" 
		    placeholder="请输入手机号" 
		    v-model="phone"
		    @input="clearError"
		  />
		</view>


        <view class="form-item">
          <input 
            class="input" 
            :type="showPassword ? 'text' : 'password'" 
            placeholder="请输入密码" 
            v-model="password"
            @input="clearError"
          />
          <text class="eye-icon" @click="togglePassword">👁️</text>
        </view>

        <text class="error-msg">{{ errorMessage }}</text>

        <button 
          class="submit-btn" 
          form-type="submit" 
        >
          立即注册
        </button>
      </form>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '', // 用户名
      password: '', // 密码
      phone: '', // 手机号
      showPassword: false, // 是否显示密码
      errorMessage: '', // 错误信息
    };
  },
  methods: {
    // 清除错误信息
    clearError() {
      this.errorMessage = '';
    },

    // 校验手机号格式
    validatePhone(phone) {
      const phoneRegex = /^[0-9]{11}$/; // 11位纯数字
      return phoneRegex.test(phone);
    },

    // 切换密码显示状态
    togglePassword() {
      this.showPassword = !this.showPassword;
    },

    // 表单提交
    async formSubmit() {
      if (!this.username.trim() || !this.password.trim() || !this.phone.trim()) {
        this.errorMessage = '用户名、手机号和密码不能为空';
        return;
      }

      if (!this.validatePhone(this.phone)) {
        this.errorMessage = '手机号格式错误，必须是11位纯数字';
        return;
      }

      const user = {
        userZhanghao: this.username.trim(),
        userPassword: this.password.trim(),
        userPhone: this.phone.trim(),
      };

      try {
        const response = await uni.request({
          url: 'http://localhost:8083/api/user/reg',
          method: 'POST',
          data: user,
          header: {
            'Content-Type': 'application/json',
          },
        });

        if (response.statusCode === 200 && response.data.code === 1) {
          uni.showToast({
            title: '注册成功',
            icon: 'success',
          });
          uni.navigateTo({ url: '/pages/login/login' });
        } else {
          this.errorMessage = response.data.msg || '注册失败，请重试';
        }
      } catch (error) {
        this.errorMessage = '网络错误，请稍后重试';
        console.error('注册失败:', error);
      }
    },
  },
};

</script>



<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f5f7fa;
}

.login-box {
  width: 85%;
  padding: 40rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.1);

  .title {
    display: block;
    text-align: center;
    font-size: 36rpx;
    color: #303133;
    margin-bottom: 60rpx;
  }
}

.form-item {
  position: relative;
  margin-bottom: 40rpx;

  .input {
    height: 88rpx;
    padding: 0 30rpx;
    border: 2rpx solid #dcdfe6;
    border-radius: 8rpx;
    font-size: 28rpx;

    &:focus {
      border-color: #409eff;
    }
  }

  .eye-icon {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 34rpx;
  }
}

.error-msg {
  display: block;
  color: #f56c6c;
  font-size: 24rpx;
  margin-bottom: 20rpx;
  min-height: 40rpx;
}

.submit-btn {
  height: 88rpx;
  line-height: 88rpx;
  font-size: 32rpx;
  background: #409eff;
  color: #fff;
  border-radius: 8rpx;

  &[disabled] {
    background: #a0cfff;
  }
}

.links {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  font-size: 26rpx;
  color: #606266;

  text {
    &:active {
      color: #409eff;
    }
  }
}
</style>